
{% include "../header.html" %}
 <script src="/static/js/monaco-editor/min/vs/loader.js"></script>
  <style>
    .edit{
        min-height: 500px;
        border:1px solid grey;
    }
    .tt{
      text-align: center;
    }
    .layui-body{
      padding: 5px;
    }
    .art_title{
      max-width: 80%;
    }
    .art_type{
      width: 120px;
    }
    .layui-textarea{
      min-height:60px;
    }
            *::-webkit-scrollbar {
        width: 7px;
        height: 1px;
    }
*::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
        border-radius: 7px;
        background: #1abc9c;
    }
*::-webkit-scrollbar-track {/*滚动条里面轨道*/
        border-radius: 7px;
        background: #EDEDED;
    }
  </style>
  <div class="layui-body">
    <div class="layui-form">
        <hr>
        <div class="layui-form-item">
            <label class="layui-form-label">类型:</label>
        <div class="layui-input-inline nav_type">
            <select name="types" lay-verify="required">
                <option value="1"
                >列表</option>
                <option value="2"
                >单页</option>
                <option value="3"
                >url</option>
                </select>
        </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">名称:</label>
            <div class=" layui-input-block nav_name">
            <input class="layui-input" type="text" name="title" required  lay-verify="required" placeholder="请输入名称" autocomplete="off"  >
            </div>
        </div>

        <div class="layui-form-item">
             <label class="layui-form-label">标题:</label>
        <div class="layui-input-block nav_title">
              <input class="layui-input" type="text" name="title" required  lay-verify="required" placeholder="请输入标题" autocomplete="off"  >
        </div>
        </div>


         <div class="layui-form-item">
            <label class="layui-form-label">排序:</label>
        <div class="layui-input-inline nav_level">
              <input class="layui-input" type="text" name="title" required  lay-verify="required" placeholder="请输入排序" autocomplete="off" value="{{len(navs)+1}}" >
        </div>
        </div>

         <div class="layui-form-item">
             <label class="layui-form-label">url:</label>
        <div class="layui-input-block nav_url">
              <input class="layui-input" type="text" name="title" required  lay-verify="required" placeholder="请输入url" autocomplete="off" >
        </div>
        </div>
        <hr>
        <div class=" layui-form-item edit">

        </div>
    </div>
    <button class="layui-btn layui-btn-fluid pub_nav">栏目发布</button>

  </div>
  <script>
    //初始化

    var editor;
    require.config({ paths: { 'vs': '/static/js/monaco-editor/min/vs' }});
	require(['vs/editor/editor.main'], function() {
		 editor = monaco.editor.create(document.querySelector('.edit'), {
			value:"",
			language: 'markdown'
		});
	});

var form = layui.form
  form.render();
  //取值
  form.on('select', function (data) {
    categoryName = data.elem[data.elem.selectedIndex];
    type=categoryName.value
  });
    type =1;
  //save
  function save () {
      let content = editor.getValue();
      let name = document.querySelector(".nav_name input").value
      let title = document.querySelector(".nav_title input").value
      let url = document.querySelector(".nav_url input").value
      let level = document.querySelector(".nav_level input").value

        console.log(content,title,name,url,level,type)
  }

  $(".pub_nav").click(function(){

    $.post("",
    {
      title:document.querySelector(".nav_title input").value,
      content:editor.getValue(),
        type:type,
        name:document.querySelector(".nav_name input").value,
        url:document.querySelector(".nav_url input").value,
        level:document.querySelector(".nav_level input").value
    },
    function(data,status){
      data = JSON.parse(data)
       if(data.code === 1){
          document.location.href="/nav/"+data.obj
       }
       if(data.code === 0){
            layer.msg(data.message)
       }
    });
  });

  </script>
 {% include "../footer.html" %}